<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="" th:content="${article.summary}">
    <meta name="keywords" content="weepmoon,杜禹天,个人主页,个人博客,java,javascript,linux,centos">
    <meta name="author" content="">


    <title th:text="${article.title}"></title>
    <link rel="icon" type="image/png" th:href="@{/hiwodyt/img/icon.png}">
    <!-- Bootstrap core CSS -->
    <link th:href="@{/hiwodyt/bootstrap/css/bootstrap.css}" rel="stylesheet">

    <!-- 自定义css -->
    <link th:href="@{/hiwodyt/css/modern-business.css}" rel="stylesheet">
    <!--文章css-->
    <link th:href="@{/hiwodyt/css/article.css}" rel="stylesheet">
    <!--尾部css-->
    <link rel="stylesheet" th:href="@{/hiwodyt/css/foot.css}"></link>
    <!--icon 通用代码-->
    <style type="text/css">
        .icon {
            width: 1em;
            height: 1em;
            vertical-align: -0.15em;
            fill: currentColor;
            overflow: hidden;
        }
    </style>
    <!--share-->
    <link th:href="@{/hiwodyt/share/share.min.css}" rel="stylesheet">
    <!--点赞css-->
    <link th:href="@{/hiwodyt/dianZan/fonts/font-awesome-4.5.0/css/font-awesome.min.css}" rel="stylesheet">
    <link th:href="@{/hiwodyt/dianZan/css/icons.css}" rel="stylesheet">
    <!--炫酷样式-->
    <link rel="stylesheet" th:href="@{/hiwodyt/swing/normalize.css}"></link>
    <link rel="stylesheet" th:href="@{/hiwodyt/swing/swing.css}"></link>
</head>
<body class="articleBody">
<!--引nav-->
<nav th:replace="hiwodyt/index::nav">

</nav>
<!--文章内容-->
<div class="container articleContain mb-4 mt-5">

    <!--面包屑导航-->
    <ol class="breadcrumb">
        <li class="breadcrumb-item active" th:text="${firstCat}">
        </li>
        <li class="breadcrumb-item active" th:text="${twoCat}"></li>
    </ol>
    <!--<div>
        <h4 class="date">
            <a href="javascript:void(0)" class="summary" th:text="${#dates.format(article.created,'yyyy-MM-dd')}"></a>
        </h4>
    </div>-->

    <div class="row">
        <div class="title col-sm-12">
            <div class=" mb-3 mb-md-4 mb-lg-4 text-center">
                <a href="javascript:void(0)">
                    <img th:src="${user.avatar}" style="height:55px;width:55px;border-radius:50%"/>
                    <p th:text="${user.nickname}" class="text-secondary mt-2 mt-md-3"></p>
                </a>
            </div>
            <input type="hidden" th:value="${article.id}" id="articleId">
            <h2 th:text="${article.title}" class="text-center mb-3"></h2>
            <div class="data font-14 font-xs-12 text-muted d-flex align-items-center justify-content-center flex-wrap">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-rili"></use>
                </svg>
                <span th:text="${#dates.format(article.created,'yyyy-MM-dd')}"></span>
                <svg class="icon ml-3" aria-hidden="true">
                    <use xlink:href="#icon-guankan"></use>
                </svg>
                <span th:text="${article.viewCount}"></span>
                <svg class="icon ml-3" aria-hidden="true">
                    <use xlink:href="#icon-xiaoxi"></use>
                </svg>
                <span th:text="${commentNum}"></span>
                <svg class="icon ml-4" aria-hidden="true">
                    <!-- <use xlink:href="#icon-icon-test1"></use>-->
                    <use th:attr="'xlink:href'=${article.weather}"></use>
                </svg>
            </div>
        </div>
        <div class="col-sm-12">
            <img th:src="${article.thumbnail}" class="img-responsive">
        </div>

        <div class="col-lg-12 mt-5">
            <!--内容填充-->
            <section th:utext="${article.text}">
            </section>
        </div>
    </div>
    <hr>
    <div class="clearfix mt-5 mb-5">
        <div class="grid ml-5" style="float:left">
            <button class="icobutton icobutton--heart"><span class="fa fa-heart"></span><span
                    class="icobutton__text icobutton__text--side" style="font-size: 25px" th:text="${article.voteUp}"
                    id="voteNumber"></span></button>
        </div>
        <div class="social-share" style="float: right"></div>
    </div>

    <div class="media post-author p-5 p-lg-4-2 my-4">
        <div class="author-avatar mr-2 mr-md-3">
            <a href="javascript:void(0)"><img th:src="${user.avatar}"/></a>
        </div>
        <div class="media-body author-info">
            <h4 class="name" th:text="${user.nickname}"></h4>
            <div class="desc text-secondary font-14" th:text="${user.signature}"></div>
            <div class="mt-2">
                <svg class="icon " aria-hidden="true">
                    <use xlink:href="#icon-qq"></use>
                </svg>
                <svg class="icon ml-2" aria-hidden="true">
                    <use xlink:href="#icon-wechat"></use>
                </svg>
            </div>
        </div>
    </div>
    <hr>
    <!-- 评论表单 -->
    <div class="card my-4">
        <h5 class="card-header" style="background-color: white">评论</h5>
        <div class="card-body row">
            <div class="col-sm-1"><img class="rounded-circle imgCircle" th:src="@{/hiwodyt/img/liuyan.jpg}">
            </div>
            <div class="col-sm-11 ">
                <form id="commentForm">
                    <input th:value="${article.id}" type="hidden" name="articleId">
                    <div class="form-group">
                        <label for="name">昵称</label>
                        <input type="text" id="name" class="form-control" rows="3" placeholder="请输入你的姓名"
                               name="author"/>
                    </div>
                    <div class="form-group">
                        <label for="comment">内容</label>
                        <textarea class="form-control" rows="3" id="comment" name="content"></textarea>
                    </div>
                    <button type="button" class="btn btn-primary" id="commentSubmit">发表</button>
                </form>
            </div>
        </div>
    </div>
    <!-- 评论模块 -->
    <div class="media mb-4" th:each="comment:${comments}">
        <img class="d-flex mr-3 rounded-circle imgCircle" th:src="@{/hiwodyt/img/liuyan.jpg}">
        <div class="media-body">
            <h5 class="mt-0 commentName" th:text="${comment.author}"></h5>
            <p class="commentInfo ml-3">
                <span class="osName" th:text="${comment.os_name}"></span>
                <span th:text="${comment.agent}" class="agent"></span>
            </p>
            <p th:text="${comment.created}" class="commentDate"></p>
            <p th:text="${comment.content}" style="margin-bottom: 30px"></p>
            <div class="media mt-4" th:if="${comment.innerComment != null}">
                <img class="d-flex mr-3 rounded-circle imgCircle " th:src="${user.avatar}">
                <div class="media-body">
                    <h5 class="mt-0 commentName" th:text="${comment.innerComment.author}"></h5>
                    <small class="tip" data-toggle="tooltip" data-placement="top" data-original-title="官方"></small>
                    <p th:utext="${comment.innerComment.created}" class="commentDate"></p>
                    <p th:text="${comment.innerComment.content}"></p>
                </div>
            </div>
            <hr/>
        </div>
    </div>
</div>

<!--回复错误模态框-->
<div class="modal fade" id="commentMsg" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="myModalLabel">回复内容有误!</h4>
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            </div>
            <div class="modal-body">请确认填写的姓名或者是内容是否有误!</div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>
<!--回复成功模态框-->
<div class="modal fade" id="successMsg" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="alert alert-success text-center">回复成功！非常感谢你宝贵的建议! 跳转中..</div>
    </div><!-- /.modal -->
</div>

<!--点赞失败模态框-->
<div class="modal fade" id="errorDianZan" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="alert alert-danger text-center">你今日已经点赞过了!</div>
    </div><!-- /.modal -->
</div>

<!--引尾部-->
<footer th:replace="hiwodyt/index::footer">
</footer>
<!-- Bootstrap core JavaScript -->
<script th:src="@{/hiwodyt/jquery/jquery.min.js}"></script>
<script th:src="@{/hiwodyt/bootstrap/js/bootstrap.bundle.min.js}"></script>
<!--获取回复用户信息-->
<script type="text/javascript" th:src="@{/hiwodyt/js/agent.js}"></script>
<!--图标-->
<script type="text/javascript" th:src="@{/hiwodyt/js/iconfont.js}"></script>
<!--share-->
<script type="text/javascript" th:src="@{/hiwodyt/share/jquery.share.min.js}">
</script>
<!--引入全局JS-->
<script type="text/javascript" th:src="@{/hiwodyt/articleApp.js}"></script>
<!--点赞插件-->
<script type="text/javascript" th:src="@{/hiwodyt/dianZan/js/mo.min.js}"></script>
<script type="text/javascript" th:src="@{/hiwodyt/dianZan/js/demo.js}"></script>
<!--引入分类标签-->
<!--时钟js-->
<script th:src="@{/hiwodyt/jquery/jquery.thooClock.js}"></script>
<!--炫酷样式-->
<script th:src="@{/hiwodyt/swing/anime.min.js}"></script>
<script th:src="@{/hiwodyt/swing/charming.min.js}"></script>
<script th:src="@{/hiwodyt/swing/swing.js}"></script>
</body>
</html>
